<template>
  <div>
    <HelloWorld :mes="mes">
      <!-- 默认插槽 -->
      <template #default>
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <hr>
      </template>
      <!-- 具名插槽 -->
      <template #header>
        <h1>我是头部</h1>  
      </template>
      <template #footer>
        <h1>我是尾部</h1>
      </template>

      <!-- 作用域插槽 -->
      <template #qqqq="user">
        {{ user.name }}---{{ user.age }}
      </template>
    </HelloWorld>
  </div>
</template>


<script>
// Vue 实现了一套内容分发的 API， 通过slot
// 1. 默认插槽
// <组件> 内容  </组件>   => 内容传递给组件内部 <slot>默认内容</slot>
// 2. 具名插槽
// <组件> <template v-slot:名字> 内容 </template> </组件>   => 内容传递给组件内部 <slot name="名字">默认内容</slot>
// 3. 作用域插槽   值会传递给变量
// <组件> <template v-slot:名字="变量"> 内容 </template> </组件>   =>   内容传递给组件内部 <slot name="名字" v-bind="值">默认内容</slot>

import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      mes: '123'
    }
  }
}
</script>